const staff_event_detail = {
    template:`
    <div class="mt-2">
                        <div class="row border-bottom pb-4 mx-1">
                            <div class="col-3 p-0">
                                <img :src="event.photo" class="w-100">
                            </div>
                            <div class="col-8">
                                <table class="table table-bordered table-sm">
                                    <thead>
                                    <tr><th colspan="2" class="h2">{{event.name}}</th></tr>
                                    </thead>
                                    <tbody>
                                    <tr><td>Code</td><td class="text-uppercase">{{event.code}}</td></tr>
                                    <tr><td>Type</td><td>{{event.type}}</td></tr>
                                    <tr><td>Address</td><td>{{event.address}}</td></tr>
                                    <tr><td>Date</td><td>{{event.date}}</td></tr>
                                    <tr><td>Status</td><td>{{event.status}}</td></tr>
                                    <tr><td>Permission</td><td>{{event.permission}}</td></tr>
                                    </tbody>
                                </table>
                                <div class="">
                                    <router-link :to="{name:'staff.event.message',params:{event_id,event_id}}" class="btn btn-primary">Message</router-link>
                                    <button class="btn btn-info" @click="finish_event(event)">Finish</button>
                                    <button class="btn btn-danger" @click="delete_event(event)">Delete</button>
                                </div>
                            </div>
                        </div>
                        <div class="pt-4">
                            <h4 class="h4">Client</h4>
                            <div class="row ml-1">
                                <div class="card col-4 py-4">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <span class="card-title h2">{{event.client.corporate_name}}</span>
                                        <button class="btn btn-outline-danger btn-sm">Change</button>
                                    </div>
                                    <div>
                                        <img src="./assets/images/user.png" class="icon">
                                        <span>{{event.client.firstname}} {{event.client.lastname}}</span>
                                    </div>
                                    <div>
                                        <img src="./assets/images/telephone.png" class="icon">
                                        <span>{{event.client.phone}}</span>
                                    </div>
                                    <div>
                                        <img src="./assets/images/email.png" class="icon">
                                        <span>{{event.client.email}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pt-4">
                            <div class="py-2">
                                <h4 class="h4 d-inline-block">Employees</h4>
                                <button class="btn btn-outline-primary btn-sm d-inline-block ml-5">Change</button>
                            </div>
                            <div class="row ">
                                <div class="employee col-3 py-3 mx" v-for="(item,index) in event.employees" :key="index">
                                    <div class="card flex-row justify-content-start px-3 py-3">
                                        <div class="avatar mr-4">
                                            <img :src="item.photo">
                                        </div>
                                        <div>
                                            <p class="card-title h5">{{item.firstname}} {{item.lastname}}</p>
                                            <p class="card-subtitle text-secondary">{{item.email}}</p>
                                        </div>
                                        <div class="scope" :class="'scope-'+item.scope">{{item.scope}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    `,
    props:['event_id'],
    data() {
        return {
            event:{
                client:{}
            }
        };
    },
    methods:{
        get_event(){
            ajax.get(`event/${this.event_id}`).then(res=>{
                if (res.status === 200){
                    this.event = res.data.data;
                }
            })
        },
        finish_event(event){
            ajax.post(`employee/finish/${this.event_id}`).then(res=>{
                if (res.status === 200){
                    Bus.$emit('m','Finish this event success','success');
                    this.get_event();
                }
            })
        },
        delete_event(event){
            ajax.delete(`event/${this.event_id}`).then(res=>{
                if (res.status === 200){
                    Bus.$emit('m','Delete this event success','success');
                    this.$router.push({name:'staff.event.index'});
                }
            })
        },
    },
    mounted(){
        this.get_event();
    }
}